<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #app {
            height: 100%;
            box-sizing: border-box;
            padding: 5px 10px;
            background-color: #efefef;
            display: flex;
            flex-direction: column;
        }

        header {
            font-weight: 700;
            height: 2.1667rem;
            line-height: 2.1667rem;
            /* background-color: skyblue; */
        }

        main {
            flex: 1;
            overflow: auto;
        }

        /* ========底部  */
        footer {
            height: 2.6rem;
            /* background-color: rgb(45, 228, 164); */
            display: flex;
            justify-content: space-around;
            border-top: 2px solid rgb(167, 164, 164);
        }

        footer>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .6rem;
            color: #4e4e4e;
        }

        footer>div .iconfont {
            font-size: 1rem;
            font-weight: 700;
        }

        footer>div:hover {
            color: #cb6890;
        }
        .hotgoods {
            background-color: #fff;
            border-radius: 10px;
            min-height: 160px;
        }
        .list{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 20px 15px 10px;
        }
        .list left{
            position: absolute;
            width: 70px;
            height: 60px;
        }
        .list  .left img{
            width: 70px;
            height: 60px;
        }
        .list .Money{
            position: relative;
            left: 0;
            bottom: 0;
            width: 70px;
            height: 15px;
            background-color: rgba(128, 128, 128, 0.282);
            text-align: center;
            line-height: 15px;
            font-size: 12px;
        }
        .list .middle{
            text-align: left;
        }
        .list  h2{
            font-size: 18px;
        }
        .list .middle .Title{
            font-weight: 700;
            color: red;
        }
        .list .middle .Shop{
            color: gray;
        }
        .list button{
            background-color: rgb(241, 22, 22);
            border-radius: 30px;
            color: #fff;
            border: none;
            width: 65px;
            height: 25px;
            line-height: 25px;
        }
        /* =========== */
        .red_envelopes {
            background-color: #fff;
            border-radius: 10px;
            min-height: 200px;
        }
        .hongbao{
            display: flex;
            justify-content: space-between;
           flex-wrap: nowrap;
            width: 100%;
        }
        .hongbao ul{
            width: 22%;
        }
        .hongbao ul img{
            width: 98%;
            list-style: none;
        }
        li{
            list-style: none;
            font-size: 12px;
            font-weight: 700;
        }
    </style>

</head>

<body>
    <div id="app">
        <header>&lt;&emsp;饿了么</header>
        <main>
            <div class="hotgoods">
                <h3>热门单品</h3>
                <div class="list"  v-for="(item,index) in goodsList" v-bind:key="index">
                    <div class="left">
                        <img :src="item.pic" alt="" >
                        <div class="Money">价值&nbsp;￥{{item.originprice}}</div>
                    </div>
                    <div class="middle">
                        <h2>{{item.name}}</h2>
                        <p class="Title">{{item.tilte}} <br> {{item.money}}</p>
                        <p class="Shop">{{item.shop}}</p>

                    </div>
                    <div class="right">
                        <button>{{item.fit}}</button>
                    </div>
                </div>
            </div>
            <div class="red_envelopes">
                <h3>通用红包限量兑</h3>
               <div class="hongbao"  >
                <ul v-for="(item,index) in moneyList" v-bind:key="index">
                    <li><img :src="item.img" alt=""></li>
                    <li>{{item.desc}}</li>
                </ul>
               </div>
            </div>
          
        </main>
        <footer>
            <div>
                <span class="iconfont icon-shouye">
                </span>
                首页
            </div>
            <div>
                <span class="iconfont icon-weibiaoti-">
                </span>
                吃货卡
            </div>
        
            <div>
                <span class="iconfont icon-gouwu">
                </span>
                订单
            </div>
            <div>
                <span class="iconfont icon-wode">
                </span>
                我的
            </div>
        </footer>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            goodsList:[
                {
                    id:1,pic:'https://img2.baidu.com/it/u=1621922821,3457663871&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=419',originprice:'9.9',
                    name:"脐橙3斤 快递到家",
                    tilte:'兑换后入手价8.9元',
                    money:'10',
                    shop:'适用门店>',
                    fit:'立即兑换'
                },
                {
                    id:2,pic:'https://img0.baidu.com/it/u=2665774668,1719292778&fm=253&fmt=auto&app=138&f=GIF?w=667&h=500',originprice:'12.9',
                    name:"耙耙柑2斤 快递到家",
                    tilte:'兑换后入手价9.9元',
                    money:'30',
                    shop:'适用门店>',
                    fit:'立即兑换'
                },
                {
                    id:3,pic:'https://img1.baidu.com/it/u=3958982194,1695501967&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500', originprice:'6.9',
                    name:'水果捞350克',
                    tilte:'兑换后入手价6.9元',
                    money:'60',
                    shop:'适用门店>',
                    fit:'立即兑换'
                }
            ],
            moneyList:[
                {
                    img:'./images/1.png',
                    desc:'吃货联盟红包'
                },
                {
                    img:'./images/1.png',
                    desc:'吃货联盟红包'
                },
                {
                    img:'./images/1.png',
                    desc:'吃货联盟红包'
                },
                {
                    img:'./images/1.png',
                    desc:'吃货联盟红包'
                }
            ]
        },
        computed() { },
        watch() { },
        methods: {},
        filters: {},
        directives: {},
        components: {},
    }) 
</script>